<!--

-->
<template>
  <div class="mc-image">
    <template v-for="(url,idx) in urls">
      <el-image @click="reviewImg(url)" :style="{width:width}" :src="url" v-bind="$attrs" v-on="$listeners" data-magical__coder__id=""></el-image>
    </template>
    <mc-dialog :visible.sync="dialogVisible"  :modal="true" top="10px" width="80%">
        <img width="100%" height="98%" :src="dialogImageUrl" alt="">
    </mc-dialog>
  </div>
</template>

<script>
import McDialog from "./McDialog.vue";
export default {
  name: 'mc-image',
  data () {
    return {
      dialogVisible:false,
      dialogImageUrl:"",
      width:"100%"
    }
  },
  components:{
    McDialog
  },
  computed:{
    urls:{
      get:function (){
        var value = [];
        if(this.src){
          var arr = this.src.split(",");
          for(var i=0;i<arr.length;i++){
            value.push(this.wrapServerName(arr[i]));
          }
        }
        return value;
      },
      set:function (v){

        // this.$emit("update:src",this.$magicaltool.request.util.unwrapServerName())
      }
    }
  },
  props:{
    //此处的value 就是父亲的v-model default:null 可以触发parent外为false
    'src' : {type:String,default:""},
    //一行几个
    'mcLineNum':{type:Number,default:1},
    'showInDialog':{type:Boolean,default:true},
  },
  watch:{

  },
  mounted () {
    if(this.mcLineNum>1){
      this.width = (100/this.mcLineNum)+"%";
    }
  },
  methods:{
    wrapServerName(url){
        return this.$magicaltool.request.util.wrapServerName(url,true)
    },
    reviewImg(url){
      if(window.iframeUi){
        return;
      }
      if(this.showInDialog){
        this.dialogVisible=true;
        this.dialogImageUrl = url;
      }
      this.$emit("mc-click",{url:url})
    }
  }
}
</script>

<style lang="scss">
.mc-image{
  width: 50%;
  display: inline-block;
  .el-image{
    box-sizing: border-box;
    height: 100%;
  }
}
</style>
